<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel">
        <rx-layout>
            <div slot="center">
                <rx-fit class="groupfit">
                    <div slot="toolheader" border="false">
                        <div class="table-page-search-wrapper">
                            <a-form layout="inline">
                                <a-row :gutter="24">
                                    <a-col :span="8">
                                        <a-form-item :label="$ti18('rxForm.name','名称')">
                                            <a-input :placeholder="$ti18('rxForm.name','名称','','input')" v-model="queryParam.Q_NAME__S_LK"/>

                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="8">
                                        <a-form-item :label="i18n('form.key','标识键')">
                                            <a-input :placeholder="i18n('form.key','标识键','input')" v-model="queryParam.Q_KEY__S_LK"/>
                                        </a-form-item>
                                    </a-col>

                                    <a-col :span="8">
                                        <span class="table-page-search-submitButtons">
                                            <a-button @click="search" icon="search" type="primary">{{$ti18('rxList.searchBtn','查询')}}</a-button>
                                            <a-button @click="resetSearch" style="margin-left: 4px">{{$ti18('rxList.resetBtn','重置')}}</a-button>
                                        </span>
                                    </a-col>
                                </a-row>
                            </a-form>
                        </div>
                    </div>
                    <rx-grid
                        ref="table"
                        :bordered="isBorder"
                        :allowRowSelect="true"
                        :multiSelect="false"
                        :columns="columns"
                        :defaultPageSize="10"
                        url="/api-form/form/core/formBoList/query"
                        :queryParam="queryParam"
                        data-field="result.data"
                        :pageSizeOptions="['10', '30', '40']"
                        id-field="id"
                        :loadDataOnstart="true"
                        @selectChange="onSelectChange"
                    >
                          <span slot="isGranted" slot-scope="{ text, record }">
                              <a-tag :color="statusMap[text].color">
                                  <span>{{ statusMap[text].text }}</span>
                              </a-tag>
                          </span>
                    </rx-grid>


                </rx-fit>
            </div>
        </rx-layout>

    </rx-dialog>
</template>

<script>
import {BaseList, Util} from "@lowcode/jpaas-common-lib";


export default {
    name: "FormBoPmtDialog",
    mixins: [BaseList],
    components: {

    },
    props: {
        layerid: {
            type: String,
            default: ""
        },
        destroy: {
            type: Function
        }
    },
    data() {
        return {
            // 表头
            columns: [
                {
                    title: this.$ti18('rxList.index','序号'),
                    type: 'indexColumn',
                    width: 80,
                    dataIndex: 'serial',
                    scopedSlots: {customRender: 'serial'},
                },
                {title: this.$ti18('rxForm.name','名称'), dataIndex: 'name', width: 140},
                {title: this.i18n('form.key','标识键'), dataIndex: 'key', width: 130},
                {title: this.i18n('form.isGranted','是否已授权'), dataIndex: 'isGranted', width: 130 , scopedSlots: {customRender: 'isGranted'}},
                {title: this.$ti18('rxForm.createTime','创建时间'), dataIndex: 'createTime', width: 140},
            ],
            statusMap: {
                'YES': {color: 'green', text: this.i18n('form.yes','是')},
                'NO': {color: 'blue', text: this.i18n('form.no','否')}
            }

        }
    },
    computed: {},
    created() {

    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"FormBoPmt",key);
        },
        search() {
            this.$refs.table.loadData();
        },
        handleSubmit() {
            Util.closeWindow(this, "ok", this.$refs.table.getSelectedRow())
        },
        cancel() {
            Util.closeWindow(this, "cancel")
        },




    }
}
</script>

<style scoped>
.groupfit >>> .gridFooter {
    padding: 4px 0 6px 0 !important;

}

.groupfit >>> .fit-footer {
    padding: 0 !important;
}

.selectBox {
    height: 106px;
    overflow-y: auto;
    border: 1px solid #ddd;
}

.selectBox > ul {
    margin: 0;
    padding: 10px;
    font-size: 0;
}

.selectBox > ul li {
    background-color: #f5f7fa;
    border-radius: 4px;
    border: solid 1px #dadde0;
    height: 30px;
	color: #46494d;
	padding-left: 4px;
	padding-right: 4px;
	cursor:pointer;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
}

.selectBox > ul li:hover {
    border-color: #4D9EFF;
    color: #4D9EFF;
}

.selectBox > ul li:hover i {
    color: #4D9EFF;
}

.selectBox > ul li span {
	display: block;
    font-size: 14px;
	line-height: 30px;
	float: left;
    
}

.selectBox > ul li i {
    margin-left: 4px;
	color: #c0c5cc;
	line-height: 30px;
}

.selectBox > ul li i:hover {
    color: #ff4d4f;
}


.toolTitle {
    line-height: 40px;
    color: rgba(0, 0, 0, 0.85);
}

.ant-tree >>> li.ant-tree-treenode-switcher-close {
    display: block;
}

.ant-form-inline .ant-form-item {
    display: flex;
    margin-bottom: 12px;
}

.table-page-search-submitButtons {
    margin-bottom: 12px;
    display: block;
    white-space: nowrap;
}

* >>> .ant-form-item-control,
* >>> .ant-form-item-label {
    line-height: 32px;
}
</style>
